<template>
  <n-form
    :model="model"
    label-placement="left"
    label-width="auto"
    require-mark-placement="right-hanging"
  >
    <n-form-item
      label="事项名称"
      path="title"
      :rules="[{ required: true, message: '请输入事项名称' }]"
    >
      <n-input v-model:value="model.title" placeholder="请输入事项名称" />
    </n-form-item>
    <n-form-item label="提醒周期">
      <n-flex>
        <n-select
          v-model:value="model.firstValue"
          :options="firstOptions"
          placeholder="请选择周期类型"
        />

        <!-- 每天 -->
        <n-flex v-if="model.firstValue === 'day'">
          <n-input v-model:value="model.hour" placeholder="小时">
            <template #suffix> 小时 </template>
          </n-input>

          <n-input v-model:value="model.minute" placeholder="分钟">
            <template #suffix> 分钟 </template>
          </n-input>
        </n-flex>

        <!-- N天 -->
        <n-flex v-if="model.firstValue === 'Nday'">
          <n-input v-model:value="model.day" placeholder="天数">
            <template #suffix> 天 </template>
          </n-input>

          <n-input v-model:value="model.hour" placeholder="小时">
            <template #suffix> 小时 </template>
          </n-input>

          <n-input v-model:value="model.minute" placeholder="分钟">
            <template #suffix> 分钟 </template>
          </n-input>
        </n-flex>

        <!-- 每小时 -->
        <n-flex v-if="model.firstValue === 'hour'" class="flex-1">
          <n-input v-model:value="model.minute" placeholder="分钟">
            <template #suffix> 分钟 </template>
          </n-input>
        </n-flex>

        <!-- N小时 -->
        <n-flex v-if="model.firstValue === 'Nhour'">
          <n-input v-model:value="model.hour" placeholder="小时">
            <template #suffix> 小时 </template>
          </n-input>

          <n-input v-model:value="model.minute" placeholder="分钟">
            <template #suffix> 分钟 </template>
          </n-input>
        </n-flex>

        <!-- N分钟 -->
        <n-flex v-if="model.firstValue === 'Nminute'" class="flex-1">
          <n-input v-model:value="model.minute" placeholder="分钟">
            <template #suffix> 分钟 </template>
          </n-input>
        </n-flex>

        <!-- 每星期 -->
        <n-flex v-if="model.firstValue === 'week'">
          <n-select
            v-model:value="model.week"
            :options="weekOptions"
            placeholder="请选择星期"
          />

          <n-input v-model:value="model.hour" placeholder="小时">
            <template #suffix> 小时 </template>
          </n-input>

          <n-input v-model:value="model.minute" placeholder="分钟">
            <template #suffix> 分钟 </template>
          </n-input>
        </n-flex>

        <!-- 每月 -->
        <n-flex v-if="model.firstValue === 'month'">
          <n-input v-model:value="model.day" placeholder="日期">
            <template #suffix> 日 </template>
          </n-input>

          <n-input v-model:value="model.hour" placeholder="小时">
            <template #suffix> 小时 </template>
          </n-input>

          <n-input v-model:value="model.minute" placeholder="分钟">
            <template #suffix> 分钟 </template>
          </n-input>
        </n-flex>
      </n-flex>
    </n-form-item>

    <n-form-item label="Cron表达式">
      <n-input v-model:value="cronExpression" readonly />
    </n-form-item>

    <div class="flex justify-end mt-4">
      <n-button round type="primary" @click="handleSave"> 保存 </n-button>
    </div>
  </n-form>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const emit = defineEmits(['save'])

const model = ref({
  title: '',
  firstValue: 'day',
  week: '1',
  day: '3',
  hour: '1',
  minute: '30'
})

const firstOptions = [
  { label: '每天', value: 'day' },
  { label: 'N天', value: 'Nday' },
  { label: '每小时', value: 'hour' },
  { label: 'N小时', value: 'Nhour' },
  { label: 'N分钟', value: 'Nminute' },
  { label: '每星期', value: 'week' },
  { label: '每月', value: 'month' }
]

const weekOptions = [
  { label: '周一', value: '1' },
  { label: '周二', value: '2' },
  { label: '周三', value: '3' },
  { label: '周四', value: '4' },
  { label: '周五', value: '5' },
  { label: '周六', value: '6' },
  { label: '周日', value: '7' }
]

// 计算属性：实时生成cron表达式
const cronExpression = computed(() => {
  const { firstValue, minute, hour, day, week } = model.value

  switch (firstValue) {
    case 'day': // 每天
      return `${minute} ${hour} * * *`

    case 'Nday': // N天
      // 注意：标准cron不支持直接表达"N天"，这里使用注释说明
      return `${minute} ${hour} */${day} * *`

    case 'hour': // 每小时
      return `${minute} * * * *`

    case 'Nhour': // N小时
      return `${minute} */${hour} * * *`

    case 'Nminute': // N分钟
      return `*/${minute} * * * *`

    case 'week': // 每星期
      return `${minute} ${hour} * * ${week}`

    case 'month': // 每月
      return `${minute} ${hour} ${day} * *`

    default:
      return '* * * * *'
  }
})

// 计算属性，把cron表达式转为可读性
const cronExpressionText = computed(() => {
  const { firstValue, minute, hour, day, week } = model.value

  switch (firstValue) {
    case 'day':
      return `每天${hour}小时${minute}分钟`
    case 'Nday':
      return `每${day}天${hour}小时${minute}分钟`
    case 'hour':
      return `每小时${minute}分钟`
    case 'Nhour':
      return `每${hour}小时${minute}分钟`
    case 'Nminute':
      return `每${minute}分钟`
    case 'week':
      return `每周${week} ${hour}小时${minute}分钟`
    case 'month':
      return `每月${day}日${hour}小时${minute}分钟`
    default:
      return ''
  }
})

// 保存处理函数
const handleSave = async () => {
  const cron = cronExpression.value
  const formData = {
    title: model.value.title,
    cron,
    schedule: cronExpressionText.value
  }

  window.ipcRenderer.send('schedule', cron)
  emit('save', formData)
}
</script>

<style scoped></style>
